<template>
	<view class="login-page">
		<view class="login-modal">
			<view class="subsection">
				<view
					class="subsection-item"
					:class="{
						active: index == current
					}"
					v-for="(item, index) in roleList"
					:key="item.id"
					@tap="roleChange(index)"
				>
					<text>{{ item.role }}</text>
				</view>
			</view>
			
			<view class="login-form">
				<uv-form>
					<uv-form-item label-width="80">
						<uv-input
							prefixIcon="account"
							:prefixIconStyle="`font-size: 22px;color: ${focusColor[userInputState]}`"
							border="bottom"
							:placeholder="roleList[current].placeholder"
							@focus="userInputState = 1"
							@blur="userInputState = 0"
							v-model="user.username"
						></uv-input>
					</uv-form-item>
					<uv-form-item label-width="80">
						<uv-input
							prefixIcon="lock"
							:prefixIconStyle="`font-size: 22px;color: ${focusColor[passwordInputState]} `"
							border="bottom"
							password
							placeholder="请输入密码"
							@focus="passwordInputState = 1"
							@blur="passwordInputState = 0"
							v-model="user.password"
						></uv-input>
					</uv-form-item>
				</uv-form>
			</view>

			<button class="login-btn" @click="login">登录</button>
			<view class="register">
				
				<text @click="registerClick" >没有账号，点击注册>></text>
			</view>
		</view>
		<image
			src="https://zxh-filetilas.oss-cn-hangzhou.aliyuncs.com/bg.jpg"
			mode="scaleToFill"
			class="image"
		/>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import {postLogin} from "@/api/userApi.js"
import Base64 from "base-64"
import {useUserStore} from "@/store/modules/user.js"

const roleList = reactive([
	{
		id:1,
		role: '学生',
		placeholder:"请输入学生学号"
	},
	{
		id:2,
		role: '教师',
		placeholder:"请输入教师工号"
	}
]);
const registerClick=()=>{
	uni.navigateTo({
		url:'/pages/register/register',
	})
}
const current = ref(0);
const roleChange = (index) => {
	current.value = index;
};
const focusColor = ref(['#909EAB', '#007aff']);
const userInputState = ref(0);
const passwordInputState = ref(0);
const user=ref({
	username:'2024020005',
	password:'123456'
})
watch(current,(val)=>{
	switch(val){
		case 0:{
			user.value.username="2020102083"
			break
		}
		case 1:{
			user.value.username="2020201001"
			break
		}
	}
},{immediate:true})

const login=()=>{
	postLogin(user.value).then(res=>{
		if(res.code==1){
			msgSuccess("登录成功",500)
			let jwt=res.data;
			let dataBody=JSON.parse(Base64.decode( jwt.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))) 
			const {setJwt,setUserData}=useUserStore()
			setJwt(jwt)
			setUserData(dataBody)
			setTimeout(()=>{
				switch(dataBody.authCode)
			{
				case 1: uni.redirectTo({ url: '/pages/index/teacherIndex' })
				break;
				case 2: uni.redirectTo({ url: '/pages/index/studentIndex' })
				break;
				default :uni.showToast({
					title: '权限错误',
					icon: 'fail',
					mask: true
				})
			}
			},500)
			
		}
	}).catch(err=>{
		msgError(err,1000)
	})
}
</script>

<style lang="scss">
.login-page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 20rpx;
	height: 100vh;
	position: relative;
	
	.image{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}

	.login-modal {
		width: 500rpx;
		padding: 50rpx;
		height: 500rpx;
		position: relative;
		background-color: #fff;
		border-radius: 50rpx;
		top: 100rpx;

		.login-form {
			margin: 50rpx 0;
		}
		.subsection {
			display: flex;
			background-color: transparent;
			color: #6a6a6a;
			height: 60rpx;
			width: 500rpx;
			font-size: 24rpx;
			align-items: center;
			border-radius: 50rpx;
			overflow: hidden;
			border: 1px solid $uni-color-primary;
			.subsection-item {
				flex: 1;
				text-align: center;
				height: 100%;
				line-height: 60rpx;
				box-sizing: border-box;
			}
			&:nth-child(2) {
				border: 1px solid $uni-color-primary;
			}
			.active {
				color: $uni-color-primary;
			}
		}
		.login-btn {
			background-color: transparent;
			border: 1px solid $uni-color-primary;
			color: $uni-color-primary;
			border-radius: 999rpx;
			width: 400rpx;
			&:active {
				transform: scale(1.02);
			}
		}
		.register{
			color: #007AFF;
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>
